<template>
  <div class="task_list">
    <navigate>任务测评列表</navigate>
    <div class="list_cont">
      <div class="task_tit">{{ info.name }}</div>
      <div class="task_num">
        本任务含量表：{{ info.CodeTaskRatingScale?.length }}份
      </div>
      <div class="list_box">
        <div
          class="item_box dis_flex white_box"
          v-for="(item, index) in info.CodeTaskRatingScale"
          :key="index"
        >
          <img
            :src="joinUrlImg(item.rating_scale_cover)"
            alt=""
            class="item_img"
          />
          <div class="flex1">
            <div class="item_tit">{{ item.rating_scale_name }}</div>

            <div class="dis_flex just_space_between">
              <div>
                <div class="item_info margin_bot10">
                  任务状态：{{ item.is_finish == 1 ? "已完成" : "未完成" }}
                </div>
                <div class="item_info">
                  量表顺序：{{ index + 1 }}/{{
                    info.CodeTaskRatingScale.length
                  }}
                </div>
              </div>
              <div class="dis_flex" v-if="item.is_finish == 1">
                <img
                  src="@/assets/images/common/success_icon.png"
                  alt=""
                  class="fish_img"
                />
                <div class="fish_txt">已完成</div>
              </div>
              <div class="item_btn" v-else @click="checkDet(item)">
                进入测评
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="deadline" v-if="info.is_time == 1">
        -- 任务截止：{{ convertTimestampToDateTime(info.end_time) }} --
      </div>
    </div>
  </div>
</template>

<script>
import { joinUrlImg } from "@/utils/setUrlImg";
import { convertTimestampToDateTime } from "@/utils/time";
import { queryCodeTaskList } from "@/api/evaluation/task";
export default {
  data() {
    return {
      info: {},
      codeId: "",
      //   taskEvaluationId: "",
      //   taskEvaluationName: "",
      //   taskEvaluationDeadline: "",
    };
  },
  created() {
    this.codeId = this.$route.query.id;
    console.log(this.codeId, "aaaaaaaaaaaaaaaaa");
    // this.taskEvaluationName = this.$route.query.name;
    // this.taskEvaluationDeadline = this.$route.query.deadline;
    this.getCodeTaskList();
  },
  methods: {
    joinUrlImg,
    convertTimestampToDateTime,
    async getCodeTaskList() {
      console.log(1111);
      let res = await queryCodeTaskList({ id: this.codeId });
      if (res.code == 200) {
        console.log(res.data, "jjjjjjjj555");
        this.info = res.data;
      }
    },
    checkDet(item) {
      console.log(item.rating_scale_id, ">>>>>>>>mm");
      this.$router.push(
        `/teamEvaluateDetail?codeId=${this.codeId}&ratingScaleId=${item.rating_scale_id}&type=scanCode`
      );
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}
.just_space_between {
  justify-content: space-between;
}
.flex1 {
  flex: 1;
  min-width: 0;
}
.white_box {
  border-radius: 6.67px;
  background-color: #ffffff;
}
.margin_bot10 {
  margin-bottom: 10px;
}
.list_box {
  margin-top: 26.33px;
}
.task_list {
  color: #333333;
  background-color: #f4f6fa;
}
.list_cont {
  padding: 0 10px;
}
.item_box {
  height: 113.33px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.task_tit,
.task_num {
  text-align: center;
}
.task_tit {
  color: #00aeff;
  font-size: 18px;
  line-height: 18px;
  margin: 27.33px 0 13.33px;
}
.task_num {
  font-size: 14px;
  line-height: 14px;
}
.item_img {
  width: 80px;
  height: 80px;
  margin-right: 16.67px;
}
.item_tit {
  font-size: 16.67px;
  line-height: 16.67px;
  margin-bottom: 21.67px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item_info {
  font-size: 12.67px;
  line-height: 12.67px;
  color: #666666;
}
.item_btn {
  width: 73.33px;
  height: 33.33px;
  line-height: 33.33px;
  color: #ffffff;
  font-size: 12.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
}
.fish_img {
  width: 16.33px;
  height: 16px;
  margin-right: 7px;
}
.fish_txt {
  color: #14c76a;
  font-size: 14px;
  line-height: 14px;
}
.deadline {
  color: #888888;
  font-size: 14px;
  line-height: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
